<template>
  <div class="order-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >我的采购申请</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="opt-head">
      <div class="opt flex flex-pack-center">
        <span :class="{'active': isApply}" @click="changeList(true)">采购申请</span>
        <span :class="{'active': !isApply}" @click="changeList(false)">采购订单</span>
      </div>
    </div>
    <!--采购申请-->
    <div class="purchase-group" v-show="isApply">
      <div class="flex purchase-item" v-for="item in purchaseList" @click="applyDetail(item)">
        <div class="flex-1" >
          <div class="tit">采购申请时间：{{item.purchaseDate}}</div>
          <div class="state">{{item.status | statusFilter}}</div>
        </div>
        <div class="detail icon icon-enter"></div>
      </div>
    </div>
    <!--采购订单-->
    <div class="order-group marginTop20" v-show="!isApply" v-for="item in orderList">
      <div class="flex flex-pack-justify consignee-info">
        <div>收货人：{{item.contacts}}</div>
        <div>{{item.phone}}</div>
      </div>
      <p class="address-info border-bottom">收货地址：{{item.addressName}}</p>
      <div class="order-info">
        <p class="flex-box">
          <span  class="flex-one">总价:<price :priceUnit="item.amountTotal || 0" unitName="" ></price> </span>
          <i class="icon icon-arrowright detail" @click="detail(item.orderSubCode)"></i>
        </p>
        <p class="flex-box">
          <span class="flex-one">商品种类：{{item.number}}种</span>
        </p>
        <p class="flex-box">
          <span class="flex-one">来源：{{item.nameSub}}</span>
        </p>
        <p class="flex-box">
          <span class="flex-one">
            <i>{{item.supplierName}}</i>
            <!--<a href="javascript:;"  class="detail" @click="detail(item.orderSubCode)">详细</a>-->
          </span>
        </p>

      </div>
      <div class="order-opt flex-box">
        <span class="">采购时间：{{item.purchaseDate}}</span>
        <div class="flex-one tr">
          <span class="colse">{{item.statusOrder | orderFilter}}</span>
          <span class="determine border-1px" v-if="item.statusOrder==3"  @click="confirmReceipt(item.orderSubCode)">确定收货</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
          isApply: true,
          purchaseList: [],
          orderList: []
      };
    },
    methods: {
      /**
       * 获取采购订单列表
       * */
      getOrderList(){
        myPurchaseOrder().then(data=>{
            if(data.returnCode == '000000'){
               this.orderList = data.result.subOrderInfo;
            }
        });
      },
      //获取采购单
      getPurchaseRequestList(){
        getPurchaseRequestList().then(data=>{
            if(data.returnCode == '000000'){
                this.purchaseList = data.result.purchaseRequestList;
            }
        })
      },
      /**
       * 确认收货
       * @param <string> 订单id
       * */
      confirmReceipt(id){
        confirmReceipt({orderSubCode: id,orderMainId: null,statusOrder: 4 }).then(data=>{
            if(data.returnCode == '000000'){
                // @todo 后续修改 item 的状态
               this.getPurchaseRequestList();
            }
        })
      },
      /**
       * 订单详细
       * @param <string> 订单id
       * */
      detail(id){
          this.$router.push({name: 'orderDetail', params: {orderCode: id}});
      },
      /**
       * 采购申请详情
       * @param <string> 采购id
       * */
      applyDetail(item){
          if(item.orderId!=null){
            this.$router.push({name: 'applyPurchaseDetailByOrder', params: {orderId: item.orderId, status: item.statusAudit, uniqueCode: item.uniqueCode || '1' }});
            return;
          }
          this.$router.push({name: 'applyPurchaseDetail', params: {status: item.statusAudit, uniqueCode: item.uniqueCode || '1' }});
      },
      /**
       * 切换采购申请/订单显示
       * @param bool
       * */
      changeList(bool){
         this.isApply = bool;
      }
    },
    filters: {
      orderFilter(status){
        if(status == 1){
          return '待付款';
        }else if(status == 2){
          return '待发货';
        }else if(status == 3){
          return '待收货';
        }else if(status == 4){
          return '交易完成';
        }else if(status == 9){
          return '交易关闭';
        }
        return '';
      },
      statusFilter(status){
        if(status == 1){
          return '待审核';
        }else if(status == 2){
          return '审核同意';
        }else if(status == 3){
          return '审核不同意';
        }else if(status == 4){
          return '生成订单';
        }
        return '';
      }
    },
    created() {
        this.getOrderList();
        this.getPurchaseRequestList();
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./purchase.less";
</style>
